<template>
	<view>
		<u-cell-group :border="false">
			<u-cell-item v-for="item in list" :key='item.id' @click='goTo(item.url)'>
				<view slot='title'>
					<u-icon :name="item.icons" style="font-size: 38rpx;"></u-icon>
					<text style="padding: 30rpx;">{{item.listName}}</text>
				</view>
			</u-cell-item>
		</u-cell-group>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						id: 0,
						icons: 'file-text-fill',
						listName: 'echarts',
						url: '/pages/tabbar/option/chart/index'
					},
					{
						id: 1,
						icons: 'mic',
						listName: '录音',
						url: '/pages/tabbar/option/sound/index'
					}, {
						id: 2,
						icons: 'map-fill',
						listName: '地图',
						url: '/pages/tabbar/option/map/index'
					},
					{
						id: 3,
						icons: 'photo-fill',
						listName: '图片相关',
						url: '/pages/tabbar/option/picture/index'
					}, {
						id: 4,
						icons: 'file-text-fill',
						listName: '表单校验',
						url: '/pages/tabbar/option/form/index'
					}, {
						id: 5,
						icons: 'chrome-circle-fill',
						listName: '内嵌网页',
						url: '/pages/tabbar/option/webview/index'
					},
					{
						id: 6,
						icons: 'more-circle-fill',
						listName: '可拖动区域',
						url: '/pages/tabbar/option/movable/index'
					}
				]
			}
		},
		methods: {
			goTo(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>
